<template>

    <div class="image">
        <div class="circular-one"></div>
        <div class="circular-two"></div>
        <div class="circular-three"></div>
        <a-upload v-model:file-list="fileList" :customRequest="customRequest" list-type="picture-card"
            @preview="preview" @remove="remove">
            <div v-if="fileList.length < 8">
                <plus-outlined />
                <div style="margin-top: 8px">Upload</div>
            </div>
        </a-upload>
        <a-modal :open="previewState.visible" :title="previewState.title" :mask-closable="false"
            @cancel="previewState.reset()">
            <img ref="imgRef" alt="example" style="width: 100%" :src="previewState.imgUrl" />
            <div class="watermark">
                <div class="watermark-text">
                    <!-- <span>水印文字：</span> -->
                    <a-input v-model:value="previewState.watermarkText" placeholder="请输入水印文字"></a-input>
                </div>
                <div class="watermark-button">
                    <a-button style="margin-right: 20px;" @click="resetPreviewState(previewState.uid)">重置</a-button>
                    <a-button type="primary" @click="addWatermark">生成水印</a-button>
                </div>
            </div>
            <template #footer>
                <a-button type="primary" @click="download(previewState.imgUrl, previewState.title)">下载水印</a-button>
            </template>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue';
import addWatermarkToImage from './utils'
// import type { UploadProps } from 'ant-design-vue';

import { reactive, ref } from 'vue'

type myFileType = {
    uid: string;
    name: string;
    status: string;
    url: string
}

const fileList = ref<myFileType[]>([])
const originalFileList: myFileType[] = []

class PreviewClass {
    visible = false;
    title = '';
    imgUrl = '';
    watermarkText = '';
    uid = '';
    reset() {
        this.visible = false;
        this.title = '';
        this.imgUrl = '';
        this.watermarkText = '';
        this.uid = '';
    }
}

const previewState = reactive(new PreviewClass())

const customRequest = ({ file }: { file: File }) => {
    if (file) {
        const reader = new FileReader();
        const index = fileList.value.length - 1

        // 读取文件为 Data URL
        reader.readAsDataURL(file);

        // 当文件读取完成时触发
        reader.onload = function (event) {
            fileList.value[index] = {
                url: event.target ? event.target.result as string : '',
                name: file.name,
                uid: (file as any).uid,
                status: 'done'
            }
            originalFileList.push(
                {
                    url: event.target ? event.target.result as string : '',
                    name: file.name,
                    uid: (file as any).uid,
                    status: 'done'
                }
            )
        };
    }

}

const preview = (file: myFileType) => {
    if (file && file.url) {
        previewState.visible = true;
        previewState.title = file.name;
        previewState.imgUrl = file.url;
        previewState.uid = file.uid;
    }
}

const remove = (file: myFileType) => {
    const curIndex = originalFileList.findIndex(item => item.uid === file.uid)
    originalFileList.splice(curIndex, 1)
}

const resetPreviewState = (uid: string) => {
    const originalFile = originalFileList.find(item => item.uid === uid)
    previewState.imgUrl = originalFile?.url as string
}

const imgRef = ref()
const addWatermark = () => {
    const res = addWatermarkToImage(imgRef.value, previewState.watermarkText)
    if (res) {
        previewState.imgUrl = res.toDataURL('image/png')
    }
}

const download = (url: string, fileName: string) => {
    const link = document.createElement('a');
    link.href = url;
    link.download = `${fileName}`;
    link.click();
}
</script>

<style scoped>
.image {
    position: relative;
    min-width: 1000px;
    height: 100vh;
    min-height: 830px;
    overflow: hidden;
    background-color: #F0F4FF;
    display: flex;
    align-items: center;
}

.circular-one {
    position: absolute;
    top: 781px;
    left: -50%;
    width: 1366px;
    height: 399px;
    background: rgba(96, 146, 255, 0.2);
    filter: blur(184px);
    opacity: 1;
}

.circular-three {
    position: absolute;
    top: -247px;
    left: 1181px;
    width: 853px;
    height: 399px;
    background: #FFD04E;
    filter: blur(184px);
    opacity: 0.3;

}

.circular-two {
    position: absolute;
    top: 813px;
    left: 371px;
    width: 848px;
    height: 399px;
    background: rgba(96, 255, 244, 0.2);
    filter: blur(184px);
    opacity: 1;

}

:deep(.ant-upload-list-picture-card) {
    display: flex;
    justify-content: center;
}

.watermark {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.watermark-button {
    text-align: right;
}
</style>
